<!-- 2021 9.30 做修改 取消扣除界面 -->
<template>
	<app-layout>
		<view class="dir-left-nowrap date-search cross-center">
			<!-- <view class="uni-list-cell-left">
				查看某个时期的金币
			</view> -->
			<view class="section1" :class="start_date == '' ? '' : 'active'">
				<picker mode="date" :value="start_date" @change="dateChanges">
					<view class="">{{start_date == '' ? '选择开始时间' : start_date}}</view>
				</picker>
			</view>
			<view class="section1" :class="end_date == '' ? '' : 'active'">
				<picker mode="date" :value="end_date" @change="dateChangee">
					<view class="">{{end_date == '' ? '选择结束时间' : end_date}}</view>
				</picker>
			</view>
			<view class="dir-left-nowrap section2">
				<view class="sec-item" @click="search">
					搜索
				</view>
				<view class="sec-item" v-if="start_date != '' || end_date != ''" @click="clear">
					清空
				</view>
			</view>
		</view>
		<view class="" style="height: 80rpx;"></view>
		<view class="u-item" v-for="(item, index) in list" :key="index">
			<view class="dir-left-nowrap cross-center main-between">
				<view class='u-desc'>{{item.share_title}}</view>
				<view class='u-integral'>金币总数{{item.prize_num}}</view>
			</view>
			<view class="dir-left-nowrap cross-center main-between">
				<!-- <view class="dir-left-nowrap cross-center souser">
					<image class="avatar" :src="item.user.avatar" mode=""></image>
					<view class="name">
						{{item.user.name}}
					</view>
				</view> -->
				<!-- <view class="name">
					{{item.name}}
				</view> -->
				<view class="u-info">
					<text>创建时间: {{item.created_at}}</text>
				</view>
				<view class="">
					红包数量:{{item.lottery_num}}
				</view>
			</view>
			<view class="dir-left-nowrap cross-center main-between">
				<view class="u-info">
					<text>时间有效期: {{item.start_time}}-{{item.end_time}}</text>
				</view>
			</view>
			<view class="btn-z dir-left-nowrap main-between">
				<button class="back-btn red-btn" :data-id="item.id" :data-name="item.name" type="default"
					open-type="share">
					分享到群
				</button>
				<view class="back-btn redback-btn" @click="torecipient(item.id)">
					查看领取人
				</view>
			</view>
		</view>
		<view v-if="list.length == 0" class="tip main-center cross-center">暂无数据</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				start_date: '',
				end_date: '',
				isSearch: false,

				page: 1,
				list: [],
				page_count: 1,
				imglist: ''
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			})
		},
		onLoad() {
			this.getList();
			this.onReq(258)
		},
		onReachBottom() {
			if (this.page_count >= this.page) {
				// this.page ++
				this.getList();
			}
		},
		onShareAppMessage(e) {
			return this.$shareAppMessage({
				path: '/pages/consumer/getredpak/getredpak',
				title: e.target.dataset.name == '' ? '' : e.target.dataset.name,
				imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					recpakid: e.target.dataset.id,
				}
			});
		},
		methods: {
			dateChanges(e) {
				this.start_date = e.detail.value
				// this.$utils.datetime('Y-m-d')
			},
			dateChangee(e) {
				this.end_date = e.detail.value
			},
			search() {
				if (this.start_date == '') {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none'
					})
					return
				}
				this.isSearch = true
				this.page = 1
				this.page_count = 1
				this.list = []
				this.getList()
			},
			clear() {
				this.isSearch = false
				this.page = 1
				this.page_count = 1
				this.list = []
				this.start_date = ''
				this.end_date = ''
				this.getList()
			},
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 258) {
						this.imglist = res.data.list[0].icon_url
					}
				}).catch(() => {

				})
			},
			torecipient(id) {
				uni.navigateTo({
					url: '/pages/consumer/getredpak/getredpak?isnoshare=true&recpakid=' + id
				})
			},
			async getList(redpakid) {
				try {
					let qdata = {
						page: this.page
					}
					if (this.isSearch) {
						qdata = {
							page: this.page,
							formdata: {
								start_time: this.start_date,
								end_time: this.end_date
							}
						}
					}
					const res = await this.$request({
						url: this.$api.gcredpak.list,
						data: qdata
					});
					let {
						code,
						data,
						msg
					} = res;
					if (code === 0) {
						data.list.map(item => {
							return item.created_at = this.$utils.datetime('Y-m-d h:i:s', item.add_time), item
								.start_time = this.$utils.datetime('Y-m-d h:i:s', item.start_time), item
								.end_time = this.$utils.datetime('Y-m-d h:i:s', item.end_time)
						})
						if (this.page !== 1) {
							this.list = this.list.concat(data.list);
						} else {
							this.list = data.list;
							this.page_count = data.pagination.page_count;
						}
						this.page = data.list.length ? this.page + 1 : this.page;
					} else {
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 1000
						});
					}
				} catch (e) {
					this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
						this.getList();
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-search {
		position: fixed;
		font-size: 28rpx;
		height: 80rpx;
		background-color: #f7f7f7;
		z-index: 10;
	}

	.section1 {
		position: relative;
		width: 240rpx;
		padding: 4rpx 8rpx;
		background-color: #FFFFFF;
		text-align: center;
		// &+.section1 {
		margin-left: 24rpx;

		// }
		&.active {
			background-color: #CD9C62;
			color: #FFFFFF;
		}

		.close-tip {
			position: absolute;
			right: 0;
			top: 0;
			width: #{64rpx};
			height: #{64rpx};
			margin-right: #{20rpx};
			z-index: 30;
		}

		.search-close {
			width: #{32rpx};
			height: #{32rpx};
			border-radius: 50%;
			margin: #{16rpx};
		}
	}

	.section2 {
		margin-left: 24rpx;
		text-align: center;
		width: 190rpx;

		.sec-item {
			// width: 95rpx;
			padding: 6rpx 0;
			width: 100%;
			border: 1rpx solid rgba($color: #000000, $alpha: .1);
		}
	}

	.u-item {
		font-size: 28upx;
		padding: 36upx 24upx;
		border-bottom: 1upx solid #e2e2e2;
		background-color: #ffffff;
	}

	.back-btn {
		width: 320rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-radius: 0;
		text-align: center;
		font-size: 28rpx;
	}

	.red-btn {
		padding: 0;
		margin: 0;
		background: #CD9C62;
		color: #FFF;
	}

	.redback-btn {
		color: #CD9C62;
		border: 1rpx solid #CD9C62;
	}

	.btn-z {
		margin-top: 32rpx;
	}

	.u-desc {
		color: #353535;
		margin-bottom: 6upx;
	}

	.u-integral {
		color: #CD9C62;
		// display: inline-block;
	}

	.u-info {
		font-size: 22upx;
		// float: right;
		color: #999999;
	}

	.tip {
		width: 100%;
		color: #999999;
		height: #{500rpx};
	}

	.souser {
		margin-top: 12rpx;
		font-size: 24rpx;

		.avatar {
			height: 24rpx;
			width: 24rpx;
		}

		.name {
			font-size: 24rpx;
			margin-left: 16rpx;
		}
	}
</style>
